<script setup lang="ts">
import { HJInterNodeData } from '../../types/comTypes';

const props = defineProps<HJInterNodeData>();
</script>

<template>
  <div
    class="basic-box"
    :class="{
      [`basic-box--${props.type}`]: props.type,
      'basic-box--selected': props.data.isSelected,
      'basic-box--dragging': props.data.isDragging,
    }"
  >
    {{ props.data }}
  </div>
</template>

<style scoped lang="less">
.basic-box {
  width: 200px;
  height: 60px;
  border: 2px solid #625454;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.2);
}

//可以根据type类型来设置不同的Node的样式
.basic-box--custom {
  border-style: dashed;
}

.basic-box--nest {
  border-style: double;
  width: 300px;
  height: 100px;
  background: transparent;
}

.basic-box:hover {
  background-color: #da8f45;
}

.basic-box--selected {
  background-color: #388d25;
}

.basic-box--dragging {
  background-color: #da5565;
}
</style>
